<template>
  <div>
    <h3>商品详情搜索页面</h3>

    <el-row>
      <el-col :span="2">你是不是要找：</el-col>
      <el-col :span="2" v-for="ot of otherType" :key="ot.typeId">
        <span @click="gotoSearch(ot.typeId)">{{ot.typeName}}</span>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-menu mode="horizontal" router>
          <el-menu-item @click="search">综合排序</el-menu-item>
          <el-menu-item @click="searchPriceASC">按价格排序</el-menu-item>
          <el-menu-item @click="searchSellDesc">按销量排序</el-menu-item>
          <el-menu-item @click="searchDateDesc">按上架日期排序</el-menu-item>

          <el-col :span="5" :push="10">
            <!--分页组件  -->
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchParams.currentPage"
                :page-sizes="[1, 2, 30, 40]"
                :page-size="searchParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-count="999"
              ></el-pagination>
            </div>
          </el-col>
        </el-menu>
      </el-col>
    </el-row>

    <!--搜索结果  -->
    <div class="clearfix">
      <div v-for="item in  goodList" :key="item.goodId">
        <el-card :body-style="{ padding: '0px'   }" class="card">
          <img :src="item.goodImgUrl" alt="图片丢失了" class="goodImg" />
          <div style="padding: 14px;">
            <span v-html="item.goodName"></span>
            <div class="bottom clearfix">
              <div>销量:{{item.goodSell}}</div>
              <div>原价:{{item.goodPrice}}</div>
              <div>现价:{{item.goodNowPrice}}</div>
              <el-button type="text" class="button" @click="gotoGoodDetail(item.goodId)">购买</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchGoodDetail,
  searchGood,
  searchGoodByType,
} from "../api/requestapi";
export default {
  name: "SearchDetail",

  data() {
    return {
      //查询参数
      searchParams: {
        //类别id
        typeId: "",

        // 排序条件
        dateDesc: false,
        priceAsc: false,
        sellDesc: false,

        //当前页数
        currentPage: 1,
        //页码大小
        pageSize: 10,
      },
      //相关分类：
      otherType: [],

      //搜索结果
      goodList: [],

      //条件总数
      total: 0,

      //当前的关键词用于不相关商品跳转:
      keyword: "",
      result: [],
      timeout: null,
    };
  },

  methods: {
    init() {
      //从路由中获取参数
      var typeId = this.$route.query.typeId;
      //赋值参数
      this.searchParams.typeId = typeId;
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },
    //当前页面数变化时
    handleCurrentChange(val) {
      //发送请求
      this.searchParams.currentPage = val;
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },

    //按不同条件搜索

    //综合
    search() {
      //查询参数
      this.searchParams.dateAsc = false;
      this.searchParams.sellAsc = false;
      this.searchParams.priceAsc = false;
      // 参数当前页
      this.searchParams.currentPage = 1;
      this.searchParams.pageSize = 10;
      // 查询商品
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },

    //按价格来搜索
    searchPriceASC() {
      //查询参数
      this.searchParams.dateAsc = false;
      this.searchParams.sellAsc = false;
      this.searchParams.priceAsc = true;
      // 参数当前页
      this.searchParams.currentPage = 1;
      this.searchParams.pageSize = 10;
      // 查询商品
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },

    // 按销量搜索
    searchSellDesc() {
      //查询参数
      this.searchParams.dateDesc = false;
      this.searchParams.sellDesc = true;
      this.searchParams.priceAsc = false;
      // 参数当前页
      this.searchParams.currentPage = 1;
      this.searchParams.pageSize = 10;
      // 查询商品
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },

    // 按生厂日期
    searchDateDesc() {
      //查询参数
      this.searchParams.dateDesc = true;
      this.searchParams.sellDesc = false;
      this.searchParams.priceAsc = false;
      // 参数当前页
      this.searchParams.currentPage = 1;
      this.searchParams.pageSize = 10;
      // 查询商品
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },

    //当前页面大小变化时
    handleSizeChange(val) {
      this.searchParams.pageSize = val;
      // 查询商品
      searchGoodByType(this.searchParams).then((Response) => {
        this.goodList = Response.data.goodList;
        this.otherType = Response.data.otherType;
      });
    },

    //gotoSearch
    gotoSearch(typeId) {
      this.$router.push({ path: "/searchByType", query: { typeId: typeId } });
      //强制刷新页面
      location.reload();
    },

    //跳转商品页面
    gotoGoodDetail(goodId) {
      alert(goodId);
      this.$router.push({ path: "/GoodDetail", query: { goodId: goodId } });
    },
  },

  created() {
    this.init();
  },
};
</script>

<style>
.card {
  width: 380px;
  height: 300px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}

.hotgood {
  width: 100%;
  margin-bottom: 20px;
}

.goodImg {
  height: 150px;
  width: 380px;
}

/* 清除浮动 */
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.paddingdiv {
  width: 20px;
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
</style>